<template>
  <!-- default布局 -->
  <el-container class="is-vertical">
    <Header :menu-color="menuColor" />
    <el-scrollbar :style="layoutMainScrollbarStyle()" ref="mainScrollbarRef">
      <el-row class="frontend-footer-brother" justify="center">
        <el-col class="user-layouts" :span="16" :xs="24">
          <Aside class="hidden-sm-and-down" />
          <Main />
        </el-col>
      </el-row>
      <Footer />
    </el-scrollbar>
  </el-container>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import Header from "./components/header.vue";
import Aside from "./components/aside.vue";
import Main from "./components/main.vue";
import Footer from "./components/footer.vue";
//引入用户中心功能自定义仓库
import { useUserInfo } from "../../store/userInfo";
import { useAdminInfo } from "@/store/adminInfo";
import { mainHeight as layoutMainScrollbarStyle } from "../../utils/layout";
import "element-plus/theme-chalk/display.css";
import { setAuthNodeRuoyi, handleMemberCenterRoute } from "@/utils/router";


//引入loading组件
import Load from "../common/loading.vue";
const route = useRoute();
const router = useRouter();
const userInfo = useUserInfo();
const adminInfo = useAdminInfo();

/**
 * vue3.0 vue-router4版本监听路由router的变化
 * 使用onBeforeRouteUpdate
 * 添加一个导航守卫，在当前位置即将更新时触发
 * 类似于 beforeRouteUpdate，但它可以在任何组件中使用
 * 当组件被卸载时，导航守卫将被移除
 * export declare function onBeforeRouteUpdate(updateGuard: NavigationGuard): void
 * 参数类型NavigationGuard
 *  RouteLocationNormalized to - 我们要导航到的路由地址
 *  RouteLocationNormalized from - 我们从哪里来的路由地址
 *  Function next (可选) - 回调以验证导航
 * 无法访问 `this`
 */

//小屏幕菜单图标颜色
const menuColor = ref<string>("bColor");
const init = () => {
  //获取个人信息
  adminInfo.getAdminInfo().then((res: any) => {
    console.log("getAdminInfo", res);
    adminInfo.dataFill(res.user);
    userInfo.dataFill(res.user);
    setAuthNodeRuoyi("/admin/", res.permissions);
  });
};
/**
 * 注册一个回调函数，在组件挂载完成后执行
 */
onMounted(() => {
  //获取用户信息
  init();
});
</script>
<style lang="scss" scoped>
.user-layouts {
  display: flex;
  padding-top: 15px;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .user-layouts {
    padding-top: 0;
  }
}

// .footer {
//     // color: var(--el-text-color-secondary);
//     // background-color: transparent !important;
//     position: fixed;
//     bottom: 0;
// }
</style>
